<!-- 前台店长 – 首页 – 打卡 – 统计			statistics -->
<template>
	<view class="warps">
		<view class="p_t_20" style="background:#fff;width: 750rpx;height: 68rpx;">
			<view class="vw60 f b c mars">
				<view class="f d c" :class="DC==0?'hei':'hui'" @click="DCs(0)">
					<text class="fs24 bold">我的统计</text>
				</view>
				<view class="f d c" :class="DC==1?'hei':'hui'" @click="DCs(1)">
					<text class="fs24 bold">团队统计</text>
				</view>
			</view>
		</view>
		<view class="" v-show="DC == 0">
			<view class="punch-top" @click="a">
				<view class="w90 f b c p_t_31">
					<view>
						<text class="bold">4月汇总</text>
					</view>
					<view>
						<image style="width:30rpx;height: 32rpx;" src="../../../static/img/028.png" mode=""></image>
					</view>
				</view>
				<view class="w80 f b c mar p_t_10">
					<view class="f d senter">
						<text class="bold">统计数</text>
						<text class="p_t_20">统计项目</text>
					</view>
					<view class="f d senter">
						<text class="bold">统计数</text>
						<text class="p_t_20">统计项目</text>
					</view>
					<view class="f d senter">
						<text class="bold">统计数</text>
						<text class="p_t_20">统计项目</text>
					</view>
				</view>
			</view>
			<view class="punch-daka">
				<view class="content">
					<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'>
					</ren-calendar>
					<!-- <view class="change">选中日期：{{curDate}}</view> -->
				</view>
				<view class="w90 p_t_20">
					<view>
						<text class="hui">共两次打卡，工时10小时</text>
					</view>
					<view class="vw40 f">
						<view class="f d p_t_40">
							<text>14:32</text>
							<text class="p_t_70">14:32</text>
						</view>
						<view class="" style="margin-left:40rpx;">
							<u-steps :list="numList" :current="0" direction="column"></u-steps>
						</view>
					</view>
					
				</view>
				
			</view>
		<view class="" style="padding: 40rpx;"></view>
		</view>
		<view class="" v-show="DC == 1">
			<view class="punch-top1 flexR aic"> 	
				<view class="flexR width750 mlr30 aic" @click="a">
					<view class="flexauto fwb">4月汇总</view>
					<image class="dx" src="../../../static/img/028.png"></image>
				</view>
			</view>
			<view class="punch-daka">
				<view class="content">
					<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'>
					</ren-calendar>
					<!-- <view class="change">选中日期：{{curDate}}</view> -->
				</view>
				<view class="w90 p_t_20 senter ">
					<u-circle-progress inactive-color="#FF7723" active-color="#2979ff" :percent="80">
						<view class="u-progress-content">
							<!-- <view class="u-progress-dot"></view> -->
							<view class="f d c">
								<text class="fs32 bold">12/15</text>
								<text class='u-progress-info'>打卡人数/应到人数</text>
							</view>
						</view>
					</u-circle-progress>
					<view class="w90 f b c ">
						<view class="f d c">
							<text class="bold fs28">统计数</text>
							<text class="hui p_t_31 fs24">统计项目</text>
						</view>
						<view class="f d c">
							<text class="bold fs28">统计数</text>
							<text class="hui p_t_31 fs24">统计项目</text>
						</view>
						<view class="f d c">
							<text class="bold fs28">统计数</text>
							<text class="hui p_t_31 fs24">统计项目</text>
						</view>
					</view>
					<view class="" style="padding: 20rpx;"></view>
				</view>
			</view>
			<view class="" style="padding: 40rpx;"></view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				DC: 1, //  0:我的统计   1:团队统计
				curDate: '',
				markDays: [],
				numList: [{
					name: '上班打卡08: 52'
				}, {
					name: '下班打卡20: 03'
				}, ]
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '考勤打卡'
			})
		},
		methods: {
			onDayClick(data) {
				this.curDate = data.date;
			},
			DCs(e) {
				this.DC = e
			},
			a(){
				uni.navigateTo({
					url:"../Stat/Stat"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.dx {
		width: 24rpx;
		height: 24rpx;
	}

	.content {
		padding-top: 50rpx;
	}

	.change {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 100rpx;
		height: 100rpx;
		color: #b89249;
		background-color: #21191b;
	}

	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #F6F8FC;
	}

	.col {
		color: #1F73F2;
		background-color: #F1F6FF;
	}

	.bol {
		background: #ececec;
	}

	.punch-top {
		width: 686rpx;
		height: 214rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-top1 {
		width: 686rpx;
		height: 80rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-daka {
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-daka-s {
		width: 300rpx;
		height: 58rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.punch-daka-lan {
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 120rpx;
	}

	/* 环形图 */
	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-info {
		font-size: 16rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
		color: '#a7a7a7';
		transform: scale(0.8);
	}
</style>
